<template>
  <div class="comment-select-page">
    <div class="page-header">
      <el-button class="back-btn" type="text" @click="goBack">
        <el-icon>
          <ArrowLeft/>
        </el-icon>
        返回
      </el-button>
      <h2>选择要评价的商品</h2>
    </div>

    <div v-loading="loading" class="content">
      <!-- 订单信息 -->
      <div v-if="orderDetail" class="order-info">
        <h3>订单信息</h3>
        <p>订单号：{{ orderDetail.orderNo }}</p>
        <p>下单时间：{{ formatDateTime(orderDetail.createTime) }}</p>
      </div>

      <!-- 商品列表 -->
      <div v-if="orderDetail" class="products-section">
        <h3>选择要评价的商品</h3>
        <div class="products-list">
          <div
              v-for="item in orderDetail.orderItems"
              :key="item.id"
              :class="{ 'commented': commentStatusMap[item.productId] }"
              class="product-item"
          >
            <div class="product-info">
              <el-image
                  :alt="item.productName"
                  :src="item.productImage || '/placeholder.jpg'"
                  class="product-image"
                  fit="cover"
              />
              <div class="product-details">
                <h4>{{ item.productName }}</h4>
                <p>单价：¥{{ formatPrice(item.unitPrice) }}</p>
                <p>数量：{{ item.quantity }}</p>
              </div>
            </div>

            <div class="product-actions">
              <el-button
                  v-if="!commentStatusMap[item.productId]"
                  size="small"
                  type="primary"
                  @click="goToComment(item.productId)"
              >
                评价商品
              </el-button>
              <el-tag v-else type="success">已评价</el-tag>
            </div>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="actions">
        <el-button @click="goBack">返回订单</el-button>
        <!-- 移除评价全部商品功能 -->
      </div>
    </div>
  </div>
</template>

<script setup>
import {onActivated, onMounted, ref} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {ElMessage} from 'element-plus'
import {ArrowLeft} from '@element-plus/icons-vue'
import {getOrderDetail} from '@/api/order'
import {getOrderItemsCommentStatus} from '@/api/comment'
import {formatDateTime, formatPrice} from '@/utils'

// 路由相关
const route = useRoute()
const router = useRouter()

// 响应式数据
const loading = ref(false)
const orderDetail = ref(null)
const commentStatusMap = ref({})

// 移除评价全部商品的计算属性

// 获取订单详情
const fetchOrderDetail = async () => {
  try {
    loading.value = true
    const orderId = route.params.orderId

    if (!orderId) {
      ElMessage.error('订单ID不能为空')
      goBack()
      return
    }

    const response = await getOrderDetail(orderId)
    orderDetail.value = response.data

    // 检查订单状态
    if (orderDetail.value.status !== 4) {
      ElMessage.warning('只有已完成的订单才能评价')
      goBack()
      return
    }

    // 获取评论状态
    await fetchCommentStatus(orderId)

  } catch (error) {
    console.error('获取订单详情失败:', error)
    ElMessage.error('获取订单详情失败')
    goBack()
  } finally {
    loading.value = false
  }
}

// 获取评论状态
const fetchCommentStatus = async (orderId) => {
  try {
    const response = await getOrderItemsCommentStatus(orderId)
    commentStatusMap.value = response.data || {}
  } catch (error) {
    console.error('获取评论状态失败:', error)
    commentStatusMap.value = {}
  }
}

// 跳转到单个商品评论页面
const goToComment = (productId) => {
  router.push({
    path: '/comment/create',
    query: {
      orderId: route.params.orderId,
      productId: productId
    }
  })
}

// 移除评价全部商品功能

// 返回
const goBack = () => {
  router.go(-1)
}

// 组件挂载时获取数据
onMounted(() => {
  fetchOrderDetail()
})

// 组件激活时刷新评论状态（从评论页面返回时）
onActivated(() => {
  if (orderDetail.value) {
    fetchCommentStatus(route.params.orderId)
  }
})
</script>

<style scoped>
.comment-select-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  min-height: 100vh;
  background: var(--bg-secondary);
}

.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
  gap: 1rem;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--primary-color);
  transition: color 0.3s ease;
}

.back-btn:hover {
  color: var(--primary-dark);
}

.page-header h2 {
  margin: 0;
  color: var(--text-primary);
  font-weight: 700;
}

.order-info {
  background: var(--bg-card);
  padding: 1.5rem;
  border-radius: var(--radius-xl);
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}

.order-info h3 {
  margin: 0 0 0.75rem 0;
  color: var(--text-primary);
  font-weight: 600;
}

.order-info p {
  margin: 5px 0;
  color: #606266;
}

.products-section h3 {
  margin: 0 0 15px 0;
  color: #303133;
}

.products-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.product-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  transition: all 0.3s ease;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

.product-item:hover {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-md);
}

.product-item.commented {
  background: var(--success-color);
  border-color: var(--success-color);
  color: white;
}

.product-info {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1;
}

.product-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
}

.product-details h4 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 16px;
}

.product-details p {
  margin: 4px 0;
  color: #606266;
  font-size: 14px;
}

.actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

@media (max-width: 768px) {
  .comment-select-page {
    padding: 15px;
  }

  .product-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .product-info {
    width: 100%;
  }

  .product-actions {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
